<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:04:20
 * @LastEditors: charles
 * @LastEditTime: 2021-12-19 10:15:54
-->
<template>

  <div>
    <!-- 标题 -->
    <div class="title">学生列表</div>

    <!-- 搜索 录入 -->
    <div class="search">
      <el-row>
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="学号" value="1"></el-option>
              <el-option label="姓名" value="2"></el-option>
              <el-option label="电话号码" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right"><el-button type="primary"
            @click="toInput">录入</el-button></el-col>
      </el-row>
    </div>

    <!-- 抽屉 -->
    <el-drawer :title=this.title :visible.sync="dialog" direction="rtl" custom-class="demo-drawer"
      ref="drawer" size="50%">
      <div class="demo-drawer__content">
        <!-- {{this.form}} -->
        <el-form :model="form" ref="myForm" :rules="rules">

          <el-row>
            <el-col :span="12">
              <el-form-item prop="date" label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.date" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="telephone" label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.telephone" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="address" label="家庭住址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="($event) => (dialog = false)">取 消</el-button>
          <el-button type="primary" @click="toAdd">提交</el-button>
        </div>
      </div>
    </el-drawer>

    <!--表格  -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type=index label="序号" width="180">
        </el-table-column>
        <el-table-column prop="date" label="学号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="telephone" label="电话号码">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="360">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-button type="primary" size="small"
                @click="($event) => toEdit(scope.row)">详情</el-button>
              <el-button type="danger" size="small"
                @click="($event) => toDel(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>

  </div>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            title: '',
            //表单验证规则
            rules: {
                date: [{ required: true, message: '请输入学生学号', trigger: 'blur' }],
                name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
                telephone: [{ required: true, message: '请输入学生电话', trigger: 'blur' }],
                address: [{ required: true, message: '请输入学生地址', trigger: 'blur' }],
            },
            form: {
                date: '',
                name: '',
                telephone: '',
                address: '',
            },
            formLabelWidth: '80px',
            dialog: false,

            input3: '',
            select: '',
            tableData: [
                {
                    date: '20230101',
                    name: '王小虎',
                    telephone: '17743561234',
                    address: '上海市普陀区金沙江路 1518 弄',
                },
                {
                    date: '20230102',
                    name: '张歆瑶',
                    telephone: '17678561234',
                    address: '上海市普陀区金沙江路 1517 弄',
                },
                {
                    date: '20230103',
                    name: '张吉惟',
                    telephone: '17743342212',
                    address: '上海市普陀区金沙江路 1519 弄',
                },
                {
                    date: '20230104',
                    name: '林国瑞',
                    telephone: '17734676543',
                    address: '上海市普陀区金沙江路 1516 弄',
                },
                {
                    date: '20230105',
                    name: '林玟书',
                    telephone: '18343561234',
                    address: '上海市普陀区金沙江路 1518 弄',
                },
                {
                    date: '20230106',
                    name: '林雅南',
                    telephone: '17678561234',
                    address: '上海市普陀区金沙江路 1517 弄',
                },
                {
                    date: '20230107',
                    name: '江奕云',
                    telephone: '17743342212',
                    address: '上海市普陀区金沙江路 1519 弄',
                },
                {
                    date: '20230108',
                    name: '刘柏宏',
                    telephone: '17734676543',
                    address: '上海市普陀区金沙江路 1516 弄',
                },
            ],
        }
    },
    methods: {
        //编辑
        toEdit(row) {
            // console.log(row)
            this.$router.push({
                path: '/sc/student/Details',
                query: row,
            })
        },
        //删除
        toDel(row) {
            this.$confirm('此操作将删除该工程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    console.log(row)
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].date == row.date) {
                            this.tableData.splice(i, 1)
                        }
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //提交录入
        toAdd() {
            this.$refs['myForm'].validate((valid) => {
                if (valid) {
                    this.tableData.unshift(this.form)
                    this.dialog = false
                    this.$notify({
                        title: '成功',
                        message: '这是一条成功的提示消息',
                        type: 'success',
                    })
                    //重置表单校验
                    // this.$refs['myForm'].resetFields()
                    //关闭抽屉
                    this.dialog = false
                } else {
                    // console.log("error submit!!");
                    return false
                }
            })
        },
        
        //录入新学生
        toInput() {
            this.title = '录入学生信息'
            this.dialog = true
        },
    },
    created() {},
}
</script>

<style>
.el-select .el-input {
    width: 130px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
.search {
    margin-top: 5px;
}

.title {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>